import React from 'react'
import Image from 'next/legacy/image'

export default function Page() {
  return (
    <div>
      <p>Blurry Placeholder</p>
      <Image
        priority
        id="blurry-placeholder"
        src="/test.ico"
        width="400"
        height="400"
        placeholder="blur"
        blurDataURL="' x='0' y='0' height='100%25' width='100%25'/%3E%3C/svg%3E"
      />

      <Image
        priority
        id="blurry-placeholder-tall-centered"
        src="/test.ico"
        width="400"
        height="400"
        placeholder="blur"
        blurDataURL="' x='0' y='0' height='100%25' width='100%25'/%3E%3C/svg%3E"
        objectPosition="center"
      />

      <div id="spacer" style={{ height: '100vh' }} />

      <Image
        id="blurry-placeholder-with-lazy"
        src="/test.bmp"
        width="400"
        height="400"
        placeholder="blur"
        blurDataURL="' x='0' y='0' height='100%25' width='100%25'/%3E%3C/svg%3E"
      />
    </div>
  )
}
